<template>
  <div class="lb-app-edit-dynamic-classify">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main" style="margin-top: 30px">
      <el-row :gutter="25">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form
            @submit.native.prevent
            :model="classifyForm"
            :rules="classifyFormRules"
            ref="classifyForm"
            label-width="140px"
          >
            <el-form-item label="分类名称" prop="title">
              <el-input
                type="text"
                maxlength="10"
                show-word-limit
                v-model="classifyForm.title"
                placeholder="请输入分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="分类图标" prop="cover">
              <lb-cover
                :fileList="classifyForm.cover"
                @selectedFiles="getImg"
              ></lb-cover>
              <lb-tool-tips>图片建议尺寸: 150 * 150</lb-tool-tips>
            </el-form-item>
            <el-form-item label="排序值" prop="top">
              <el-input-number
                class="lb-input-number"
                v-model="classifyForm.top"
                :controls="false"
                :precision="0"
                :min="0"
                placeholder="请输入排序值"
              ></el-input-number>
              <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
            </el-form-item>
            <el-form-item>
              <lb-button
                type="primary"
                @click="submitFormInfo('classifyForm')"
                >{{ $t('action.submit') }}</lb-button
              >
              <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      id: 0,
      navTitle: '',
      classifyForm: {
        id: '',
        title: '',
        cover: [],
        top: ''
      },
      classifyFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入分类名称',
          trigger: 'blur'
        },
        cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        top: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        }
      }
    }
  },
  created () {
    let { id } = this.$route.query
    if (id) {
      this.id = id
      this.getFormInfo(id)
    }
    this.navTitle = id
      ? `${this.$t('menu.DynamicClassifyEdit')}`
      : `${this.$t('menu.DynamicClassifyAdd')}`
  },
  methods: {
    async getFormInfo (id) {
      let { code, data } = await this.$api.dynamicCateInfo({ id })
      if (code !== 200) return
      data.cover = [{ url: data.cover }]
      for (let key in this.classifyForm) {
        this.classifyForm[key] = data[key]
      }
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.classifyForm))
          subForm.cover = subForm.cover[0].url
          console.log('subform', subForm)

          let methodModel = this.id ? 'dynamicCateUpdate' : 'dynamicCateAdd'
          this.$api[methodModel](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.goBack()
            }
          })
        }
      })
    },
    getImg (img) {
      this.classifyForm.cover = img
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-edit-dynamic-classify {
  width: 100%;
  .page-main {
    width: 100%;
    .el-form {
      width: 500px;
    }
    .el-input,
    .lb-input-number {
      width: 300px;
    }
  }
}
</style>
